<!DOCTYPE html>
<html>
<head>
    <title>API Response Test</title>
</head>
<body>
    <h1>API Response Test</h1>
    <button onclick="testAPI()">Test API</button>
    <div id="result"></div>

    <script>
        async function testAPI() {
            try {
                const response = await fetch('https://tqi.techlinkpets3d.com/api/daka/person_rank');
                const contentType = response.headers.get('content-type');
                const text = await response.text();
                
                document.getElementById('result').innerHTML = `
                    <h2>Status: ${response.status}</h2>
                    <h2>Content-Type: ${contentType}</h2>
                    <h2>Response Text:</h2>
                    <pre>${escapeHtml(text)}</pre>
                `;
                
                if (contentType && contentType.includes('application/json')) {
                    try {
                        const json = JSON.parse(text);
                        document.getElementById('result').innerHTML += `
                            <h2>Parsed JSON:</h2>
                            <pre>${JSON.stringify(json, null, 2)}</pre>
                        `;
                    } catch (e) {
                        document.getElementById('result').innerHTML += `
                            <h2 style="color: red;">JSON Parse Error: ${e.message}</h2>
                        `;
                    }
                } else {
                    document.getElementById('result').innerHTML += `
                        <h2 style="color: orange;">Warning: Not JSON content-type</h2>
                    `;
                }
            } catch (error) {
                document.getElementById('result').innerHTML = `
                    <h2 style="color: red;">Request Error: ${error.message}</h2>
                `;
            }
        }
        
        function escapeHtml(unsafe) {
            return unsafe
                .replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;")
                .replace(/"/g, "&quot;")
                .replace(/'/g, "&#039;");
        }
    </script>
</body>
</html>